<template>
	<view class="chart-container">
		<view class="chart-title">{{ title }}</view>

		<!-- 图表主体 -->
		<view class="chart-body">
			<!-- Y轴刻度 -->
			<view class="y-axis">
				<text class="y-label">拥挤</text>
				<text class="y-label">适中</text>
				<text class="y-label">空闲</text>
			</view>

			<!-- 柱状图区域 -->
			<scroll-view class="chart-scroll" scroll-x>
				<view class="chart-content" :style="{ width: contentWidth + 'rpx' }">
					<!-- 网格线 -->
					<view class="grid-lines">
						<view
							v-for="i in 5"
							:key="i"
							class="grid-line"
						></view>
					</view>

					<!-- 柱状图 -->
					<view class="bars-container">
						<view
							v-for="(item, index) in chartData"
							:key="index"
							class="bar-wrapper"
							@tap="handleBarTap(item)"
						>
							<!-- 柱子 -->
							<view class="bar-column">
								<view
									class="bar-fill"
									:class="getBarClass(item.value)"
									:style="{ height: getBarHeight(item.value) }"
								>
									<text class="bar-value">{{ item.value }}</text>
								</view>
							</view>

							<!-- X轴标签 -->
							<text class="bar-label">{{ item.label }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 图例 -->
		<view class="chart-legend">
			<view class="legend-item">
				<view class="legend-color legend-low"></view>
				<text class="legend-text">空闲(1-2)</text>
			</view>
			<view class="legend-item">
				<view class="legend-color legend-medium"></view>
				<text class="legend-text">适中(3)</text>
			</view>
			<view class="legend-item">
				<view class="legend-color legend-high"></view>
				<text class="legend-text">拥挤(4-5)</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'CongestionChart',
	props: {
		// 图表数据 [{label: '8:00', value: 3}, ...]
		data: {
			type: Array,
			default: () => []
		},
		// 图表标题
		title: {
			type: String,
			default: '拥挤度趋势'
		}
	},
	computed: {
		/**
		 * 图表数据（确保有默认值）
		 */
		chartData() {
			return this.data.length > 0 ? this.data : this.getDefaultData()
		},

		/**
		 * 内容宽度（根据数据点数量动态计算）
		 */
		contentWidth() {
			return this.chartData.length * 80
		}
	},
	methods: {
		/**
		 * 获取默认数据（24小时模拟数据）
		 */
		getDefaultData() {
			const hours = Array.from({ length: 24 }, (_, i) => i)
			return hours.map(hour => ({
				label: `${hour}:00`,
				value: this.getRandomLevel()
			}))
		},

		/**
		 * 生成随机拥挤度等级（1-5）
		 */
		getRandomLevel() {
			return Math.floor(Math.random() * 5) + 1
		},

		/**
		 * 获取柱子高度百分比
		 * @param {Number} value 拥挤度值(1-5)
		 */
		getBarHeight(value) {
			const percentage = (value / 5) * 100
			return `${percentage}%`
		},

		/**
		 * 获取柱子颜色类名
		 * @param {Number} value 拥挤度值(1-5)
		 */
		getBarClass(value) {
			if (value <= 2) return 'bar-low'
			if (value === 3) return 'bar-medium'
			return 'bar-high'
		},

		/**
		 * 点击柱子事件
		 */
		handleBarTap(item) {
			uni.showToast({
				title: `${item.label} 拥挤度: ${item.value}`,
				icon: 'none',
				duration: 1500
			})
		}
	}
}
</script>

<style scoped>
.chart-container {
	width: 100%;
	background: #ffffff;
	border-radius: 16rpx;
	padding: 32rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.chart-title {
	font-size: 32rpx;
	font-weight: 500;
	color: #1f2937;
	margin-bottom: 32rpx;
	text-align: center;
}

/* 图表主体 */
.chart-body {
	display: flex;
	height: 400rpx;
	margin-bottom: 24rpx;
}

/* Y轴 */
.y-axis {
	width: 60rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 20rpx 0;
	margin-right: 16rpx;
}

.y-label {
	font-size: 20rpx;
	color: #9ca3af;
	writing-mode: vertical-rl;
	text-orientation: upright;
}

/* 可滚动区域 */
.chart-scroll {
	flex: 1;
	white-space: nowrap;
}

.chart-content {
	position: relative;
	height: 100%;
	min-width: 100%;
}

/* 网格线 */
.grid-lines {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 40rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	pointer-events: none;
}

.grid-line {
	height: 1rpx;
	background: #e5e7eb;
	width: 100%;
}

/* 柱状图容器 */
.bars-container {
	display: flex;
	align-items: flex-end;
	height: 100%;
	padding-bottom: 40rpx;
	gap: 16rpx;
}

.bar-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 64rpx;
}

.bar-column {
	flex: 1;
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	position: relative;
}

.bar-fill {
	width: 48rpx;
	border-radius: 8rpx 8rpx 0 0;
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 8rpx;
	transition: all 0.3s ease;
}

.bar-fill:active {
	opacity: 0.8;
}

.bar-value {
	font-size: 20rpx;
	color: #ffffff;
	font-weight: 500;
}

/* 柱子颜色 */
.bar-low {
	background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
}

.bar-medium {
	background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
}

.bar-high {
	background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
}

/* X轴标签 */
.bar-label {
	font-size: 20rpx;
	color: #6b7280;
	margin-top: 8rpx;
	transform: rotate(-45deg);
	transform-origin: center;
	white-space: nowrap;
}

/* 图例 */
.chart-legend {
	display: flex;
	justify-content: center;
	gap: 32rpx;
	padding-top: 24rpx;
	border-top: 1rpx solid #e5e7eb;
}

.legend-item {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.legend-color {
	width: 24rpx;
	height: 24rpx;
	border-radius: 4rpx;
}

.legend-low {
	background: #22c55e;
}

.legend-medium {
	background: #fbbf24;
}

.legend-high {
	background: #ef4444;
}

.legend-text {
	font-size: 22rpx;
	color: #6b7280;
}
</style>
